<template>
  <div id="app">
    <transition
      name="fade"
      mode="in-out"
    >
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.fade-enter-active {
  z-index: -1;
  /* animation: fade .5s ease-in-out; */
}
.fade-leave-active {
  z-index: 1;
  animation: fade .5s ease-in-out reverse;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

<style lang="stylus">
  .wrapper
    position absolute
    overflow hidden
    top 0
    font-size 0
    .background
      width 100%
    .left-top-title
      position absolute
      top 50px
      left 50px
      padding-left 20px
      .left-line
        position absolute
        height 100%
        left 0
        width 2px
        background #fff
        animation-duration 3s
        &.black
          background black
      >img
        animation-duration 2s
        // animation-delay .5s
      >h1
        margin-top 10px
        font-size 24px
        font-weight 100
        letter-spacing 24px
        color white
        animation-duration 2s
        // animation-delay .5s
</style>

